<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <button id="btn1">移除1个类名</button>
    <button id="btn2">移除所有类名</button>
    <button id="btn3">移除多个类名</button>
    <button id="btn4">以函数为参数</button>
    <hr />
    <ul class="ul">
      <li class="li li1">1</li>
      <li class="li li2">2</li>
      <li class="li li3">3</li>
      <li class="li li4">4</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      // 移除某个类名
      $('#btn1').click(function () {
        $('li').first().removeClass('li1')
      })

      // 移除所有类名
      $('#btn2').click(function () {
        $('li').removeClass()
      })

      // 移除多个类名
      $('#btn3').click(function () {
        $('li').eq(2).removeClass('li li3')
      })

      // 以函数为参数
      $('#btn4').click(function () {
        $('li').removeClass(function (index, oldclass) {
          console.log('函数参数值', index, oldclass)
          if (index === 3) {
            return 'li4'
          }
        })
      })
    </script>
  </body>
</html>
